<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>用户管理列表</title>
    <head th:replace="header::html"></head>
</head>
<body>
<div class="x-nav">
          <span class="layui-breadcrumb">
            <a href="">首页</a>
            <a href="">演示</a>
            <a>
              <cite>导航元素</cite></a>
          </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       onclick="location.reload()" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
</div>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body ">
                    <form class="layui-form layui-col-space5">
                        <div class="layui-inline layui-show-xs-block ">
                            <input class="layui-input" autocomplete="off"  placeholder="开始日" name="start"
                                   id="start">
                        </div>
                        <div class="layui-inline layui-show-xs-block end">
                            <input class="layui-input" autocomplete="off"  placeholder="截止日" name="end"
                                   id="end">
                        </div>
                        <div class="layui-inline layui-show-xs-block">
                            <input type="text" name="username" placeholder="请输入用户名" autocomplete="off"
                                   class="layui-input">
                        </div>
                        <div class="layui-inline layui-show-xs-block">
                            <button class="layui-btn" lay-submit="" lay-filter="search"><i
                                    class="layui-icon">&#xe615;</i></button>
                        </div>
                    </form>
                </div>
                <div class="layui-card-header">
                    <button class="layui-btn layui-btn-danger" onclick="delAll()"><i class="layui-icon"></i>批量删除
                    </button>
                    <button class="layui-btn" onclick="xadmin.open('添加用户','/user/add',500,600)" permission="sys:user:add">
                        <i class="layui-icon"></i>添加
                    </button>
                </div>
                <div class="layui-card-body ">
                    <table id="userList" lay-filter="member"></table>
                    <script type="text/html" id="barDemo">
                        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                    </script>
                </div>
            </div>
        </div>
    </div>
</div>
</body>

<script>
    layui.use(['table', 'form','laydate'], function () {
        var table = layui.table,
            form = layui.form,
            laydate = layui.laydate;


        //日期
        laydate.render({
            elem: '#start'
            , format: 'yyyy-MM-dd' //可任意组合
            , trigger: 'click'
        });
        laydate.render({
            elem: '#end'
            , format: 'yyyy-MM-dd' //可任意组合
            , trigger: 'click'
        });

        //第一个实例
        table.render({
            elem: '#userList'
            , id: "userList"
            , height: 'full-230' //高度最大化减去差值
            , url: '/user/list' //数据接口
            , page: true //开启分页
            , request: {
                pageName: 'pageNum' //页码的参数名称，默认：page
                , limitName: 'pageSize' //每页数据量的参数名，默认：limit
            }
            , response: {
                statusCode: 200 //规定成功的状态码，默认：0
            }
            , cols: [
                [ //表头
                    {type: 'checkbox', fixed: 'left'}
                    , {field: 'id', title: 'ID', sort: true, fixed: 'left'}
                    , {field: 'username', title: '用户名'}
                    , {field: 'nickname', title: '昵称', sort: true}
                    , {field: 'headimgurl', title: '头像'}
                    , {field: 'phone', title: '手机'}
                    , {field: 'telephone', title: '电话', sort: true}
                    , {field: 'email', title: '邮箱', sort: true}
                    , {
                    field: 'status', title: '状态', templet: function (data) {
                        return data.status ? "启用" : "禁用"
                    }
                }
                    , {field: 'createtime', title: '创建时间', sort: true}
                    , {field: 'updatetime', title: '修改时间', sort: true}
                    , {fixed: 'right', title: '操作', width: 150, toolbar: '#barDemo'}
                ]
            ],
            done:function(){
                checkPermission()
            }
        });

        //监听工具条
        table.on('tool(member)', function (obj) {
            var data = obj.data;
            if (obj.event === 'del') {
                layer.confirm('真的删除行么', function (index) {
                    $.ajax({
                        url: "/user/delete/" + data.id,
                        type: "POST",
                        dataType: 'json',
                        success: function (result) {
                            layer.alert(result.msg, {icon: 1}, function (index1) {
                                layer.close(index1);
                                //xadmin.father_reload();
                                table.reload('userList');
                            });
                        },
                    });

                });
            } else if (obj.event === 'edit') {
                console.log("edit");
                xadmin.open('编辑用户信息', '/user/edit/' + data.id);
            }
        });


        //搜索
        form.on('submit(search)', function (data) {
            var username = data.field.username;
            var createBefore = data.field.start;
            var createAfter = data.field.end;
            table.render({
                elem: '#userList'
                , id: "userList"
                , height: 'full-230' //高度最大化减去差值
                , url: '/user/list' //数据接口
                , page: true //开启分页
                , where: {
                    "username": username,
                    "createBefore": createBefore,
                    "createAfter": createAfter,
                }
                , request: {
                    pageName: 'pageNum' //页码的参数名称，默认：page
                    , limitName: 'pageSize' //每页数据量的参数名，默认：limit
                }
                , response: {
                    statusCode: 200 //规定成功的状态码，默认：0
                }
                , cols: [
                    [ //表头
                        {type: 'checkbox', fixed: 'left'}
                        , {field: 'id', title: 'ID', sort: true, fixed: 'left'}
                        , {field: 'username', title: '用户名'}
                        , {field: 'nickname', title: '昵称', sort: true}
                        , {field: 'headimgurl', title: '头像'}
                        , {field: 'phone', title: '手机'}
                        , {field: 'telephone', title: '电话', sort: true}
                        , {field: 'email', title: '邮箱', sort: true}
                        , {
                        field: 'status', title: '状态', templet: function (data) {
                            return data.status ? "启用" : "禁用"
                        }
                    }
                        , {field: 'createtime', title: '创建时间', sort: true}
                        , {field: 'updatetime', title: '修改时间', sort: true}
                        , {fixed: 'right', title: '操作', width: 150, toolbar: '#barDemo'}
                    ]
                ]
            });
            return false;
        });
        //查询权限
        checkPermission();
    });


</script>
</html>